<template>
	<view>
		<view class="nav-box">
			<view class="nav">
				<image class="nav-image" src="../../static/images/icons/back.svg" @click="back"></image>
				<view class="nav-title" style="opacity: 0;">编辑帖子</view>
				<button class="nav-button" :disabled="flag" @click="send">发布</button>
			</view>
		</view>
		<view class="post-box">
			<view class="input-title">
				<input type="text" v-model="inputTitle" maxlength="16" placeholder="请输入标题(必填)" @input="checkTitle">
			</view>
			<view class="input-content">
				<textarea maxlength="1000" v-model="inputContent" placeholder="请输入帖子内容(建议在一千字以内)" @input="checkTitle"></textarea>
			</view>
			<view class="upload-image">
					<uni-file-picker limit="9" 
					title="最多选择9张图片" 
					:image-styles="imageStyles" 
					file-extname="png,jpg,webp"
					mode="grid" 
					file-mediatype="image"
					ref="files"
					@select="selectImage"
					@delete="deleteImage">
					</uni-file-picker>
			</view>
		</view>
	</view>
</template>

<script>
	import {addPost,PostCount} from "../../static/js/Post.js"
	import { baseUrl } from '../../static/js/config.js'
	export default {
		data() {
			return {
				"flag":true,
				"sendFlag":false,
				"userId":0,
				"inputTitle":"",
				"inputContent":"",
				"image":{},
				"files":[],
				"postInfo":{
					"title":"",
					"content":""
				},
				"imageStyles": {
					"width": 64,
					"height": 64,
					"border": {
						'color':"#ababab",
						'width':1,
						'style':'solid',
						'radius':'5rpx'
					}
				},
			}
		},
		onShow(){
			this.userInfo = uni.getStorageSync("userInfo")
		},
		methods: {
			back(){
				uni.navigateBack({
					url: '/pages/user/user'
				})
			},
			checkTitle(){
				if(this.inputTitle != "" ){
					this.flag = false
				}else{
					this.flag = true
				}
			},
			selectImage(e){
				e.tempFilePaths.map(item => {
					this.files.push(item)
					console.log("-----选择图片文件-----" + item)
				})
			},
			deleteImage(e){
				for (var i = 0; i < this.files.length; i++) { 
				    if(e.tempFilePath.indexOf(this.files[i])){
				    	this.files.splice(i, i);
				    	break;
				    }
				 }
			},
			send(){
				if(this.sendFlag){
					return true
				}
				this.sendFlag = true
				let fileList = this.files
				let userId = this.userInfo.id
				PostCount(this.userInfo.id).then(res=>{
					for (var i = 0; i < fileList.length; i++) {
					    uni.uploadFile({
					    	url: baseUrl+'/app-api/app/post/upload?userId=' + userId + "&postCount=" + (res.data+1),
					    	filePath: fileList[i],
					    	name: 'file',//参数名,后台接收的字段名,根据需要更改
					    	header:{
					    		// "Content-Type": "multipart/form-data",
					    		"Authorization":'Bearer' + uni.getStorageSync("login-token")
					    	},
					    	success: (uploadFileRes) => {
					    		console.log(uploadFileRes.data);
					    	}
					    });
					 }
					 //添加帖子
					 this.postInfo.userId = this.userInfo.id
					 this.postInfo.title = this.inputTitle
					 this.postInfo.content = this.inputContent
					 if(fileList.length > 0){
					 	this.postInfo.image = '{"userId":' + this.userInfo.id + ',"postCount":' + (res.data + 1) + ',"imgCount": ' + this.files.length + '}'
					 }else{
					 	this.postInfo.image = ""
					 }
					 addPost(this.postInfo).then(response=>{
						 this.sendFlag = false
					 	uni.reLaunch({
					 		url:"/pages/index/index"
					 	})
					 }).catch(err=>{})
				}).catch(err=>{})
			}
		}
	}
</script>

<style>
	@import url("../../static/css/base.css");
	.post-box{
		position: relative;
		margin: 20rpx 20rpx 0 20rpx;
		top: 180rpx;
	}
	.input-title{
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		font-weight: bold;
	}
	.input-content{
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.input-content textarea{
		height: 750rpx;
		width: 100%;
		background-color: #fff;
	}
</style>
